feat(apollo-react): add loop boundary states and safe area validation [MST-11096]#818
feat(apollo-react): add loop boundary states and safe area validation [MST-11096]#818SreedharAvvari wants to merge 1 commit into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Dependency License Review
License distribution
Excluded packages
|
SreedharAvvari
changed the title
SreedharAvvari
added
the
dev-packages
📦 Dev Packages
|
There was a problem hiding this comment.
Pull request overview
This PR extends the canvas loop container UX by introducing an explicit boundaryState API on LoopNode (default / drop-target / invalid) and adding a boundary-safe-area rect validation helper for drag/drop containment checks. It also adds focused unit tests and a Storybook comparison story to cover the new states and geometry behavior.
Changes:
- Added configurable safe-area buffering to
getContainerSafeAreaand introducedisRectInsideContainerSafeAreafor boundary-safe validation. - Introduced
LoopNodeBoundaryState+boundaryStateprop and rendered drop-target/invalid as boundary outlines via Tailwind classes + adata-boundary-stateattribute. - Added unit tests for the new safe-area helper and loop boundary-state rendering, plus a Storybook story showing all states side-by-side.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/apollo-react/src/canvas/utils/container.ts | Adds safe-area buffer options and a rect-in-boundary-safe-area validator helper. |
| packages/apollo-react/src/canvas/utils/container.test.ts | Adds tests validating boundary-safe-area containment and measured-dimension handling. |
| packages/apollo-react/src/canvas/components/LoopNode/LoopNode.types.ts | Introduces LoopNodeBoundaryState and exposes boundaryState on the public LoopNode config/props. |
| packages/apollo-react/src/canvas/components/LoopNode/LoopNode.tsx | Applies boundary state via data-boundary-state and outline styling for drop-target/invalid states. |
| packages/apollo-react/src/canvas/components/LoopNode/LoopNode.test.tsx | Adds coverage ensuring each boundary state renders the expected boundary styling without altering the body frame styling. |
| packages/apollo-react/src/canvas/components/LoopNode/LoopNode.stories.tsx | Adds a “Boundary States” story to compare default/drop-target/invalid visually. |
| /** Returns whether a local child rect is fully inside the container boundary safe area. */ | ||
| export function isRectInsideContainerSafeArea( | ||
| rect: RectLike, | ||
| containerNode: Pick<Node, 'width' | 'height' | 'measured' | 'style'> | ||
| ): boolean { | ||
| const safeArea = getContainerSafeArea(containerNode, undefined, { | ||
| buffer: CONTAINER_BOUNDARY_SAFE_AREA_BUFFER, | ||
| }); |
|
This PR has been stale for over 2 weeks with no new commits. Closing — feel free to reopen if you'd like to continue this work. To keep a PR exempt from this automation, add the |
📊 Coverage + size by packagePer-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.
"Coverage" is each package's own |
Summary
boundaryStateAPI for loop nodes withdefault,drop-target, andinvalidstates.Validation
pnpm exec biome check --write ...pnpm --filter @uipath/apollo-react exec tsc --noEmit -p tsconfig.jsonpnpm --filter @uipath/apollo-react test -- src/canvas/components/LoopNode/LoopNode.test.tsx src/canvas/utils/container.test.tsNotes